<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/11/18
  Time: 16:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css"/>
</head>
<body>
<input type="text" id="title">
<input type="text" id="title2">
<button id="tt">搜索</button>
<table id="demo1" lay-filter="test1"></table>
<script type="text/javascript" src="layui/layui.js"></script>
<script src="js/jquery-1.12.4.js"></script>
<script>
    //在本页面中要使用layer组件了。后期使用别的组件的时候都要这样引入

    layui.use(["table","form","layer","laydate"], function(){
        //可以使用这个组件。
        var table=layui.table;
        var form = layui.form;
        var layer=layui.layer;
        //调用table的方法。
        //第一个实例
        table.render({
            elem: '#demo1'
            ,url: 'poems' //数据接口
            ,method:"get"
            ,page:true
            ,limit:10
            ,toolbar:"#toolbar"
            ,limits:[2,4,6,8,10]
            ,cols: [[ //表头
                {field: 'content', title: '内容'}
                ,{field: 'title', title: '标题'}
            ]]
        });
           $("#tt").click(function (){
               var c=$("#title").val();
               var d=$("#title2").val();
               table.render({
                   elem: '#demo1'
                   ,url: 'recordd' //数据接口
                   ,method:"get"
                   ,page:true
                   ,limit:4
                   ,where:{ss:c,dd:d}
                   ,limits:[2,4,6,8,10]
                   ,cols: [[ //表头
                       {field: 'transactionDate', title: '日期'}
                       ,{field: 'amount', title: '支出\存入'}
                       ,{field: 'balance', title: '余额'}
                       ,{field: 'transactionType', title: '类型'}
                   ]]
               });
           })


        //监听工具条
        table.on('tool(test1)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据,当前行的student对象
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if(layEvent === 'delete'){ //删除
                //confirm确认
                layer.confirm("是否确认删除",function(index){
                    //发出ajax请求
                    $.ajax({
                        url:"users/"+data.id,
                        type:"DELETE",
                        success:function(){
                            //重载table表格
                            table.reload("demo1",{
                                page: {curr: 1}
                            });
                            layer.msg("删除成功！");
                        }
                    });
                    layer.close(index);
                });
            } else if(layEvent === 'update'){ //编辑
               location="huifu.jsp?id="+data.id+"";
            }
        });
    });

</script>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="update">查看回复</button>
    </div>
</script>
</body>
</html>
